<template>
  <div class="contain">
    <div class="contain-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>系统设置</el-breadcrumb-item>
        <el-breadcrumb-item>协议管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="contain-body">
      <div class="body-header">
        <el-tabs v-model="activeName">
          <el-tab-pane label="用户端-免责声明" name="1"></el-tab-pane>
          <el-tab-pane label="医生端-免责声明" name="2"></el-tab-pane>
          <el-tab-pane label="文献证明" name="3"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="body-table">
        <div class="wangEdit-box" id="wangEditThree" v-show="activeName === '3'">
          <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorThree"
              :defaultConfig="toolbarConfig"
              :mode="mode"
          />
          <Editor
              style="height: 90%; overflow-y: hidden;"
              v-model="docu.agreementContent"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreatedThree"
          />
          <div class="btn">
            <el-button type="primary" size="mini" @click="submit('3')">保 存</el-button>
          </div>
        </div>

        <div class="wangEdit-box" id="wangEditOne" v-show="activeName === '1'">
          <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorOne"
              :defaultConfig="toolbarConfig"
              :mode="mode"
          />
          <Editor
              style="height: 90%; overflow-y: hidden;"
              v-model="patientObj.agreementContent"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreatedOne"
          />
          <div class="btn">
            <el-button type="primary" size="mini" @click="submit('1')">保 存</el-button>
          </div>
        </div>
        <div class="wangEdit-box" id="wangEditTwo" v-show="activeName === '2'">
          <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorTwo"
              :defaultConfig="toolbarConfig"
              :mode="mode"
          />
          <Editor
              style="height: 90%; overflow-y: hidden;"
              v-model="doctorObj.agreementContent"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreatedTwo"
          />
          <div class="btn">
            <el-button type="primary" size="mini" @click="submit('2')">保 存</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import common from "@/utils/common";

export default {
  components: {Editor, Toolbar},
  data() {
    return {
      activeName: '1',
      editorOne: null,
      editorTwo: null,
      editorThree: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            server: common.requestUrl + '/system/uploadFileEditor',
            fieldName: 'file',
            maxFileSize: 10 * 1024 * 1024,
            withCredentials: true,
            headers: {
              token: sessionStorage.getItem('tokenValue')
            },
            timeout: 10 * 1000, // 10 秒
            maxNumberOfFiles: 10,
          }
        }
      },
      mode: 'simple', // or 'simple'
      patientObj: {}, //患者端协议
      doctorObj: {},  //医生端协议
      docu: {} //文献证明
    }
  },
  watch: {
    activeName(newVal, oldVal) {
      if (newVal === '1') {
        this.findAgreement(1)
      } else if (newVal === '2') {
        this.findAgreement(2)
      } else {
        this.findAgreement(3)
      }
    }
  },
  mounted() {

  },
  created() {
    if (this.activeName === '1') {
      this.findAgreement(1)
    } else if (this.activeName === '2') {
      this.findAgreement(2)
    } else {
      this.findAgreement(3)
    }
  },
  methods: {
    submit(role) {
      let obj = {}
      if (role === '1') {
        obj.role = 1
        obj.agreementContent = this.editorOne.getHtml()
      } else if (role === '2') {
        obj.agreementContent = this.editorTwo.getHtml()
        obj.role = 2
      } else {
        obj.agreementContent = this.editorThree.getHtml()
        obj.role = 3
      }
      this.axios.post('/agreement/editAgreement', obj).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
        }
      })
    },
    //查询协议
    findAgreement(role) {
      this.axios.post('/agreement/findAgreement?role=' + role).then(res => {
        if (res.data.code === 200) {
          if (role === 1) {
            this.patientObj = res.data.data
          } else if (role === 2) {
            this.doctorObj = res.data.data
          } else {
            this.docu = res.data.data
          }
        }
      })
    },
    onCreatedOne(editor) {
      this.editorOne = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onCreatedTwo(editor) {
      this.editorTwo = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onCreatedThree(editor) {
      this.editorThree = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    }
  },

  beforeDestroy() {
    const editor1 = this.editorOne
    const editor2 = this.editorTwo
    const editor3 = this.editorThree
    if (editor1 == null) return
    editor1.destroy() // 组件销毁时，及时销毁编辑器
    if (editor2 == null) return
    editor2.destroy() // 组件销毁时，及时销毁编辑器
    if (editor3 == null) return
    editor3.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped lang="less">
.contain {
  width: 100%;
  height: 100%;

  .contain-header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
  }

  .contain-body {
    width: 100%;
    height: calc(100% - 50px);
    background-color: #fff;
    padding: 1%;
    box-sizing: border-box;

    .body-header {
      width: 100%;
      height: 50px;
    }

    .body-table {
      width: 100%;
      height: calc(100% - 50px);
      overflow: hidden;

      .btn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .wangEdit-box {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
